<template>
  <a-modal
    :footer="false"
    title-align="start"
    class="comomModal"
    :maskClosable="false"
    @cancel="onCancel"
    @update:visible="$event => $emit('update:visible',  false)">
    <template #title>
      <div class="model-title-text">{{ title }}</div>
    </template>
    <slot name="default"></slot>
  </a-modal>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
let props = defineProps({
    title: {
      type: String,
      default: ()=> ''
    },
    visible: {
      type: Boolean,
      default: ()=> false
    }
})



const emits = defineEmits([
  'onCancel',
  'update:visible'
])
const onCancel = ()=>{
  emits('onCancel');
  emits('update:visible', false);
}

</script>

<style lang="less">
  :deep(.comomModal){
    .arco-modal-header{
      height: 60px !important;
    }
  }

  .model-title-text{
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    padding-left: 17px;
    border-left: 2px solid #409EFF;
  }

  .arco-select-view-single.arco-select-view-disabled {
    color: rgb(29,33,41);
    background-color: var(--color-fill-2);
    border-color: transparent;
    cursor: not-allowed;
}

</style>